<template>
	<div class="footBody">
		<div class="logo-box">
			<img src="../../static/img/logo01.png" alt="logo" @click="$router.push('/')">
		</div>
		<div class="foot-box">
			<div class="foot-right-top">
				<div class="tab-box">
					<span class="tab-item" @click="$router.push('/')">{{$t("navModel.home")}}</span>
					<span class="tab-item" @click="$router.push('/about')">{{$t("navModel.about")}}</span>
					<span class="tab-item" @click="$router.push('/device')">{{$t("navModel.equipment")}}</span>
					<span class="tab-item" @click="$router.push('/serviceIdea')">{{$t("navModel.service")}}</span>
					<span class="tab-item" @click="$router.push('/partners')">{{$t("navModel.body")}}</span>
				</div>
				<div class="right-info-box">
					<div class="info-item">
						{{$t("companyModel.name")}}
					</div>
					<div class="info-item">
						{{$t("companyModel.phone")}}
					</div>
					<div class="info-item">
						{{$t("companyModel.address")}}
					</div>
				</div>
			</div>
			<div class="bottom-box">
				<div class="noe-item">
					版权所有@{{$t("companyModel.name")}}
				</div>
				<div class="noe-item">
					粤ICP备16114726号
				</div>
				<div class="noe-item">
					<img src="../../assets/images/beian.png" alt="">粤公网安备44010502001858号
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Foot",
		data() {
			return {}
		}
	}
</script>

<style scoped>
	.footBody {
		width: 100%;
		/* height: 500px; */
		border-top: rgba(0, 0, 0, 0.1) solid 2px;
		color: #000;
		font-family: Fy;
		display: flex;
		padding: 60px 0;
	}

	.logo-box {
		padding: 20px;
		width: 25%;
	}

	.logo-box img {
		width: 300px;
	}

	.logo-box img:hover {
		cursor: pointer;
	}

	.foot-box {
		width: 75%;
		padding: 20px 0;
	}

	.foot-right-top {
		display: flex;
		justify-content: space-between;
	}

	.tab-box {
		display: flex;
		flex-direction: column;
		font-size: 25px;
		font-weight: 600;
		color: #000;
	}

	.tab-item {
		margin-bottom: 20px;
		transition: 0.5s;
		border-bottom: #fff solid 2px;
	}

	.tab-item:hover {
		cursor: pointer;
		border-bottom: #000 solid 2px;
	}

	.right-info-box {
		width: 60%;
	}

	.right-info-box .info-item:nth-child(1) {
		color: #000;
		font-weight: 600;
		font-size: 20px;
	}

	.right-info-box .info-item:nth-child(2) {
		margin: 10px 0;
		color: rgba(0, 0, 0, 0.7);
		font-size: 18px;
	}

	.right-info-box .info-item:nth-child(3) {
		color: rgba(0, 0, 0, 0.5);
		font-size: 18px;
	}

	.info-item {}

	.bottom-box {
		margin-top: 80px;
	}

	.noe-item {
		margin: 10px;
		display: flex;
		align-items: center;
	}
</style>
